<template>
  <div class="content">
    <h1 class="title"><i class="fas fa-user"></i> 客人管理</h1>
    <div class="input-group">
      <input v-model="currentGuest.name" placeholder="姓名" class="input-field" :disabled="!isAuthenticated">
      <input v-model="currentGuest.phone" placeholder="电话" class="input-field" :disabled="!isAuthenticated">
      <input v-model="currentGuest.idCard" placeholder="身份证" class="input-field" :disabled="!isAuthenticated">
      <button @click="isEditing ? updateGuest() : addGuest()" class="action-button" :disabled="!isAuthenticated">
        {{ isEditing ? '更新' : '添加' }}
      </button>
      <button v-if="isEditing" @click="cancelEdit" class="cancel-button" :disabled="!isAuthenticated">取消</button>
    </div>
    <table class="data-table">
      <thead>
        <tr>
          <th>姓名</th>
          <th>电话</th>
          <th>身份证</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(guest, index) in guests" :key="index">
          <td>{{ guest.name }}</td>
          <td>{{ guest.phone }}</td>
          <td>{{ guest.idCard }}</td>
          <td>
            <button @click="editGuest(index)" class="edit-button" :disabled="!isAuthenticated">编辑</button>
            <button @click="deleteGuest(index)" class="delete-button" :disabled="!isAuthenticated">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'GuestManagement',
  computed: {
    guests() {
      return this.$store.state.guests
    },
    isAuthenticated() {
      return localStorage.getItem('isAuthenticated') === 'true';
    }
  },
  data() {
    return {
      currentGuest: {
        name: '',
        phone: '',
        idCard: ''
      },
      isEditing: false,
      editingIndex: -1
    }
  },
  methods: {
    addGuest() {
      this.$store.commit('ADD_GUEST', { ...this.currentGuest })
      this.resetForm()
    },
    editGuest(index) {
      this.currentGuest = { ...this.guests[index] }
      this.isEditing = true
      this.editingIndex = index
    },
    updateGuest() {
      this.$store.commit('UPDATE_GUEST', {
        index: this.editingIndex,
        guest: { ...this.currentGuest }
      })
      this.resetForm()
    },
    deleteGuest(index) {
      this.$store.commit('DELETE_GUEST', index)
      if (index === this.editingIndex) {
        this.resetForm()
      }
    },
    cancelEdit() {
      this.resetForm()
    },
    resetForm() {
      this.currentGuest = { name: '', phone: '', idCard: '' }
      this.isEditing = false
      this.editingIndex = -1
    }
  }
}
</script>

<style scoped>
.content {
  margin-left: 240px;
  padding: 40px;
  background-color: #f4f6f9;
}

.title {
  font-size: 32px;
  color: #333;
  margin-bottom: 20px;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.input-field {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 15px;
  font-size: 16px;
  width: 200px;
}

.action-button {
  padding: 12px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.action-button:hover {
  background-color: #0056b3;
}

.cancel-button {
  padding: 12px 20px;
  background-color: #f8f9fa;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.cancel-button:hover {
  background-color: #e2e6ea;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.data-table th,
.data-table td {
  padding: 15px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

.data-table th {
  background-color: #f2f2f2;
  font-weight: 600;
}

.edit-button {
  padding: 8px 15px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.edit-button:hover {
  background-color: #218838;
}

.delete-button {
  padding: 8px 15px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.delete-button:hover {
  background-color: #c82333;
}
</style>